<!DOCTYPE html>
<html>
	<head>
		<title>订单列表</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 所有的 css & js 资源 -->
		<link rel="stylesheet" href="http://unpkg.com/element-ui@2.15.6/lib/theme-chalk/index.css">
		<link rel="stylesheet" href="../../static/sa.css"> 
		<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
		<script src="https://unpkg.com/element-ui@2.15.6/lib/index.js"></script>
		<script src="../../static/jquery.min.js"></script>
		<script src="../../static/kj/layer/layer.js"></script>
		<script src="../../static/sa.js"></script>
		<script src="../../sa-resources/router.js"></script>
	</head>
	<body>
		<div class="vue-box" style="display: none;" :style="'display: block;'">
			<div class="c-panel">
			<el-descriptions title="基本信息">
				<el-descriptions-item label="订单编号">{{m.order_bn}}</el-descriptions-item>
				<el-descriptions-item label="客户">{{m.customer_name}}</el-descriptions-item>
				<el-descriptions-item label="发货单编号">{{m.delivery_bn}}</el-descriptions-item>
				<el-descriptions-item label="发货时间">{{m.created_at}}</el-descriptions-item>
				<el-descriptions-item label="物流公司">{{m.company_name}}</el-descriptions-item>
				<el-descriptions-item label="备注">
					<el-tag size="small">{{m.remark}}</el-tag>
				</el-descriptions-item>
			</el-descriptions>
			<el-divider></el-divider>
			<el-descriptions title="发货单金额">
				<el-descriptions-item label="发货单金额">{{m.total_amount}}</el-descriptions-item>
				<el-descriptions-item label="运费">{{m.express_amount}}</el-descriptions-item>
			</el-descriptions>
			<el-divider></el-divider>
			<el-descriptions title="收货信息">
				<el-descriptions-item label="收货人">{{m.consignee}}</el-descriptions-item>
				<el-descriptions-item label="收货人手机">{{m.mobile}}</el-descriptions-item>
				<el-descriptions-item label="地址">{{m.full_address}}</el-descriptions-item>
			</el-descriptions>
			<el-divider></el-divider>
			<template>
				<el-tabs tabPosition='left' style="height: 200px;">
					<el-tab-pane label="发货单明细">
						<template>
							<el-table :data="m.items" border style="width: 100%">
								<el-table-column prop="name" label="商品名称" width="100"></el-table-column>
								<el-table-column prop="goods_bn" label="商品编号" width="100"></el-table-column>
								<el-table-column prop="specs" label="规格"></el-table-column>
								<el-table-column prop="unit" label="单位"></el-table-column>
								<el-table-column prop="price" label="单价"></el-table-column>
								<el-table-column prop="qty_ordered" label="下单数量"></el-table-column>
								<el-table-column prop="delivery_qty" label="发货数量"></el-table-column>
								<el-table-column prop="total_amount" label="下单金额"></el-table-column>
								<el-table-column prop="delivery_amount" label="发货金额"></el-table-column>
							</el-table>
							</template>
					</el-tab-pane>

					<el-tab-pane label="发货单日志">

					</el-tab-pane>
				</el-tabs>
			</template>
		</div>
		</div>
        <script>
			var app = new Vue({
				el: '.vue-box',
				data: {
					id: sa.p('id', 0),
					sa: sa, // 超级对象
					m: {}
				},
				methods: {
					// 刷新
					f5: function(){
						
					}
				},
				created: function(){
					// 初始化数据
					sa.ajax(router.getDelivery, {delivery_id: this.id}, function(res) {
						this.m = res;
					}.bind(this), {type: 'get'}); 
				}
			});
		</script>
	</body>
</html>